import Svg,{
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');

//./lib/extract/extractViewBox
//const meetOrSliceTypes = {
//     meet: 0,
//     slice: 1,
//     none: 2
// };
//const alignEnum = [
//     "xMinYMin",
//     "xMidYMin",
//     "xMaxYMin",
//     "xMinYMid",
//     "xMidYMid",
//     "xMaxYMid",
//     "xMinYMax",
//     "xMidYMax",
//     "xMaxYMax",
//     "none"
// ]
export default class SvgExample13 extends React.Component {


  render() {
    return (
      <View style={{...StyleSheet.absoluteFill,alignItems: 'center', justifyContent: 'center' }}>
        <Svg
          height="100"
          width="100"
        >
          <Defs>
            <ClipPath id="clip">
              <Circle cx="50%" cy="50%" r="40%"/>
            </ClipPath>
          </Defs>
          <Rect
            x="0"
            y="0"
            width="100%"
            height="100%"
            fill="red"
          />
          <Rect
            x="5%"
            y="5%"
            width="50%"
            height="90%"
          />

          <Image
            x="5%"
            y="5%"
            width="50%"
            height="90%"
            preserveAspectRatio="xMaxYMax slice"
            opacity="0.5"
            href={require('../image.jpg')}
            clipPath="url(#clip)"
          />
          <Text
            x="50"
            y="50"
            textAnchor="middle"
            fontWeight="bold"
            fontSize="16"
            fill="blue"
          >HOGWARTS</Text>
        </Svg>
      </View>
    );
  }
}